<template>
	<view class="addInspectTabsContent">
		<view class="upper">
			<commonNavBar title="风险等级确定表" :showBack="false"  >
				<template v-slot:right >
					<image src="/static/img/save.png" @tap="saveImage" style="width: 45rpx;height: 45rpx;"></image>
				</template>
			</commonNavBar>  
			<scroll-view id="content" :scroll-y="true" :style="{height: contentHeight + 'px' }">
				<view id="scrrent-page" class="list" :style="{width:tableWidth+'rpx'}"  >
					 <table class="content-table" celspacing="0" ref="contentTable" :style="{width:tableWidth+'rpx'}" > 
						 <tr>
							 <td class="table-namef" rowspan="8">主体信息</td>
							 <td class="table-name"  style="width: 20%">名称</td>
							 <td class="table-value" colspan="3" >{{checkData.companyName}}</td>
						 </tr>
						 <tr> 
							 <td class="table-name">地址</td>
							 <td class="table-value" colspan="3">{{checkData.companyAddress}}</td>
						 </tr>
						 <tr> 
							 <td class="table-name">业态</td>
							 <td class="table-value" colspan="3">{{checkData.companyCompanyType}}</td>
						 </tr>
						 <tr> 
							 <td class="table-name">联系人及联系方式</td>
							 <td class="table-value" colspan="3">{{checkData.contactPhone}}</td>
						 </tr>
						 <tr> 
							 <td class="table-name">上年度风险等级</td>
							 <td class="table-value" colspan="3">{{checkData.lastYearRiskLevel}}</td>
						 </tr>
             <tr>
               <td class="table-name">是否为食品经营项目包含餐饮服务的食品销售经营者</td>
               <td class="table-value" style="width: 15%">{{checkData.isFoodServicesSale}}</td>
               <td class="table-name" style="width: 20%" >是否为经营品种包含畜禽水产品的食品销售者 </td>
               <td class="table-value">{{checkData.isFrozenFoodProducts}}</td>
             </tr>
             <tr>
               <td class="table-name">是否为贮存品类包含畜禽水产品的冷藏冷冻食品贮存服务提供者</td>
               <td class="table-value">{{checkData.isFrozenFoodStorage}}</td>
               <td class="table-name">是否设座</td>
               <td class="table-value">{{checkData.isShezuo}}</td>
             </tr>
             <tr>
               <td class="table-name">是否为校园及其周边100米范围内食品经营者</td>
               <td class="table-value">{{checkData.isXiaoyuan}}</td>
               <td class="table-name">是否因实施食品安全领域违法行为被列入严重违法失信名单</td>
               <td class="table-value">{{checkData.isLieyan}}</td>
             </tr>
             <tr>
               <td class="table-namef" rowspan="3"> 风险分值</td>
               <td class="table-name">静态风险因素量化分值</td>
               <td class="table-value">{{checkData.staticScore}}</td>
               <td class="table-name" rowspan="2">本次风险等级得分</td>
               <td class="table-value"  rowspan="2">{{checkData.score}}</td>
             </tr>
             <tr>
               <td class="table-name">动态风险因素量化分值</td>
               <td class="table-value" >{{checkData.dynamicScore}}</td>
             </tr>
             <tr>
               <td class="table-name">分值风险等级</td>
               <td class="table-value"  colspan="3">{{checkData.scoreLevel}}</td>
             </tr>
<!--						 <tr>
							 <td class="table-name">特定餐饮服务提供者</td>
							 <td class="table-value">{{checkData.tgz}}</td>
						 </tr>
						 <tr> 
							 <td class="table-name">食用农产品批发市场</td>
							 <td class="table-value">{{checkData.companyName}}</td>
						 </tr> -->
						 <tr>  
							 <td class="table-name" rowspan="2">主体风险等级</td>
							 <td class="table-value" colspan="4" >
								 <view class="content-list" v-for=" (content,index)  in checkData.contentList">
									   <text class="text" v-if="content.selection == '1'">✓ </text>
									   <text class="text" v-else>□ </text>
									   {{content.title}}
								 </view>
							 </td> 
						 </tr>
						 <tr>   
							 <td class="table-name">本年度风险等级</td>
							 <td class="table-value" colspan="3">{{checkData.riskLevel}}</td>
						 </tr>
						 <tr>
							 <td class="table-name">备注</td>
							 <td class="table-value" colspan="4">
                 <textarea maxlength="2000" name="remarks" style="text-align: left;width: 100%;" rows="5"  placeholder="请输入备注信息" ></textarea>
               </td>
						 </tr>
						 <tr>   
							 <td class="table-value"  style="text-align: left;" colspan="3">填表人签名:<image class="signature-image" :src="sigPic == null ? '/static/img/sing.png' : sigPic" @tap="sign(1)"> </image></td>
							 <td class="table-value" style="text-align: left;" colspan="3">审核人签名:<image class="signature-image" :src="sigPic2 == null ? '/static/img/sing.png' : sigPic2" @tap="sign(2)"> </image></td>
						 </tr>
						 <tr>   
							 <td class="table-value" colspan="3" style="text-align: right;">{{formattedDate}}</td>
							 <td class="table-value" colspan="3" style="text-align: right;">{{formattedDate}}</td>
						 </tr>
					 </table>
				</view>
			</scroll-view>
		</view> 
		<screenshot ref="screenshot" :screenId="'scrrent-page'" @renderFinish="getScreenImg"></screenshot>
	</view>
</template>

<script>
	const currentDate = new Date();
	const year = currentDate.getFullYear();
	const month = String(currentDate.getMonth() + 1).padStart(2, '0');
	const day = String(currentDate.getDate()).padStart(2, '0');
	const formattedDate = `${year}年${month}月${day}日`;
	import longscreen from '@/components/screenShot.vue' 
	import commonNavBar from '@/components/CommonNavBar.vue';
	
	export default {
		components:{
			commonNavBar,
			'screenshot': longscreen 
		},
		data() {
			return {
				checkData: {
					standardList: []
				},
				saveStatus: false,
				sigPic:null,
				sigPic2:null, 
				checkId:null,
				tableWidth:750,
				contentHeight:0,
				formattedDate:formattedDate,
			}
		},
		filters: { 
			dateFilter(value){
				if (value == undefined || value == 'undefined') {
					return ''
				} else {
					const  valueArr =  value.split("-");
					return valueArr[0]+'年'+valueArr[1]+'月'+valueArr[2]+'日'
				}
			}
		}, 
		onLoad(options) {
			this.checkId = options.checkId 

		},
		onReady() {
			const that = this;
			this.initLoadData();
			
			uni.createSelectorQuery().in(this).select("#content").fields({
				rect: true
			}, function(res) {
				that.contentHeight = uni.getSystemInfoSync().windowHeight - res.top
			}).exec();
		},
		onBackPress() {
			if(!this.saveStatus){
				return true;
			} else {
				return false;
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			async initLoadData() {
				//加载页面所需要数据	
				uni.showLoading({
					title:'获取数据中',
					mask: true
				})
				const res = await uni.$api.getRiskConfirmTable({
					checkId: this.checkId
				})
				
				if (res.data.code == '1') {
					uni.hideLoading();
					uni.showToast({
						title: '获取信息失败',
						icon: 'error'
					})
					return;
				} 
				console.log( res.data.data)
				this.checkData = res.data.data
				uni.hideLoading();
			},
			saveImage() {
				if(this.sigPic == null || this.sigPic2 == null){
					uni.showToast({
						icon: 'error',
						title:'请先进行签名'
					})
					return;
				}
				this.tableWidth = 1500;
				this.$refs.screenshot.startScreen();
			},
			getScreenImg(ret) {
				const that = this;
				that.tableWidth = 750;
				//根据传输过来的id 和选中的图片传到后台直接保存 
				uni.showLoading({
					title: '正在保存' ,
					mask: true
				})
				const uploadTask = uni.uploadFile({
					url: '/riskManager/updateRiskConfirmTable', //仅为示例，非真实的接口地址
					filePath: ret.posterPath, 
					name: "imgFile",
					timeout: '10000', //超时时间10秒 
					formData: {
						"checkId": that.checkId 
					},
					dataType: 'json',
					success: (upRes) => { 
						console.log(upRes.data)
						const result = JSON.parse(upRes.data);
						if( result.code  == '1'){
							uni.showToast({
								icon:'error',
								title: '保存失败,请重新尝试' 
							})
							return;
						}
						uni.showToast({
							icon:'success',
							title: '保存成功' 
						});
						this.saveStatus = true;
						const eventChannel = that.getOpenerEventChannel();
						eventChannel.emit('reloadList2');
						uni.navigateBack() 
					},
					fail(err) {	
						uni.showToast({
							icon:'error',
							title: '保存失败,请重新尝试' 
						})
					}
				});
			},
			sign(type){ 
				const that =this;
				//签名
				 uni.navigateTo({
				 	url:'/pages/signature/signature',
					events:{
						updateSign(data){ 
							if(type == 1){
								that.sigPic = data;
							} else if(type == 2){
								that.sigPic2 = data;
							}  else if(type == 3){
								that.sigPic3 = data;
							} 
						}
					}
				 })
			}
		}
	}
</script>

<style lang="scss">
	.addInspectTabsContent {
		background: #F9F9F9;
		height: calc(100vh - 195rpx);
		padding: 14px;
		.upper {
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;

			.title {
				background: url('../../static/img/inspectBg.png');
				background-size: cover;
				width: 100%;
				height: 115rpx;
				line-height: 115rpx;
				position: relative;
				display: flex;
				justify-content: center;
				color: #ffffff;

				.arrow {
					position: absolute;
					left: 33rpx;
					top: 50%;
					transform: translate(0%, -50%);
					width: 100rpx;
					height: 100rpx;

					&::before {
						display: block;
						content: "";
						position: absolute;
						top: 50%;
						left: 0%;
						width: 20rpx;
						height: 20rpx;
						border-left: 1px solid #fff;
						border-top: 1px solid #fff;
						transform: translate(0%, -50%) rotate(-45deg);
					}
				}

				text {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing: 1px;
				}

			}
		}
	}

	.intelligence {
		position: absolute;
		right: 30rpx;
		top: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}
	.list{
		padding-top: 20px;
		padding-bottom: 20px;
		overflow-y: auto;
	}
 
 
	.signature-image{
		width: 100px;
		height: 100px;
	}
	.check-content{
		word-break: break-all;
		word-spacing: 4px;
	}
	.table-namef{
		width: 200rpx;
		text-align: center;
		padding: 10px;
		border: 1px solid #8a8a8a;
	}
	.table-name{
		width: 200rpx;
		text-align: center;
		padding: 10px;
		border: 1px solid #8a8a8a;
	}
	.table-value{
		width: 700rpx;
		text-align: center;
		padding: 10px;
		border: 1px solid #8a8a8a;
	}
	.content-list{
		text-align: left;
		width: 100%;
	}
	.text{
		margin-right: 5px;
	}
</style>